<template>
    <div>
        <!-- 1、新增按钮区域 -->
        <div style="display: flex;justify-content: flex-start">
            <el-button type="primary" icon="el-icon-plus" size="small" @click='handleEdit("add")'>新增</el-button>
        </div>
        <!-- 2、分隔线区域 -->
        <el-divider style="margin-top: 20px"></el-divider>




        <!-- 3、菜单表格区域 -->
        <el-table
            :data="menuTreeList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="menuId"
            border
            :default-expand-all="false"
            height="72vh"
            :props="defaultProps"
            :tree-props="{children: 'subs', hasChildren: 'hasChildren'}"
            >
            <el-table-column
                prop="title"
                label="菜单名称"
                align="center">
            </el-table-column>
            <el-table-column
                align="center"
                prop="type"
                label="类型">
                <!--进行条件判断-->
                <template slot-scope="scope">
                    <!--获取type属性，进行条件判断-->
                    <el-tag v-if="scope.row.type==='D'">目录</el-tag>
                    <el-tag type="success" v-else-if="scope.row.type==='M'">菜单</el-tag>
                    <el-tag type="info" v-else>按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                align="center"
                prop="icon"
                label="图标">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="perms" label="权限标识"/>
<!--            <el-table-column align="center" prop="index" label="路由地址"/>-->
            <el-table-column align="center" prop="component" label="组件路径"/>
            <el-table-column align="center" prop="num" label="排序"/>
<!--            <el-table-column align="center" label="status" width="80">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-switch-->
<!--                        :value="scope.row.status === 1" :disabled="true">-->
<!--                    </el-switch>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column label="操作" width="180" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success" v-if="scope.row.type !== 'B'" icon="el-icon-plus" size="mini" title="添加下级节点"  @click="handleEdit('add', scope.row)"/>
                    <el-button type="primary" icon="el-icon-edit" size="mini" title="修改" @click="handleEdit('edit', scope.row)"/>
                    <el-button type="danger" icon="el-icon-delete" size="mini" title="删除" @click="deleteM(scope.row)" :disabled="scope.row.subs.length > 0"/>
                </template>
            </el-table-column>
        </el-table>


        <!--添加菜单-->
        <el-dialog title="添加" :visible.sync="addVisible" width="30%" >
            <el-form ref="form" :model="form"  label-width="90px" size='mini'>
                <el-form-item label="菜单名称" >
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="类型">
                    <el-select v-model="form.type"  placeholder="请选择">
                        <el-option key="1" label="目录" value="D"></el-option>
                        <el-option key="2" label="菜单" value="M"></el-option>
                        <el-option key="3" label="按钮" value="B"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="icon">
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
<!--                <el-form-item label="路由地址" prop='index'>-->
<!--                    <el-input v-model="form.index"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="排序">
                    <el-input v-model="form.num"></el-input>
                </el-form-item>

            </el-form >

            <span slot="footer" class="dialog-footer">
                <el-button @click="addVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('add')">确 定</el-button>
            </span>
        </el-dialog>
<!--修改-->
        <el-dialog title="修改" :visible.sync="editVisible" width="30%" >
            <el-form ref="form" :model="form" label-width="90px" size='mini'>
                <el-form-item label="菜单名称" prop='title'>
                    <el-input v-model="form.title"></el-input>
                </el-form-item>

                <el-form-item label="类型" prop='type'>
                    <el-select v-model="form.type"  placeholder="请选择">
                        <el-option key="1" label="目录" value="目录"></el-option>
                        <el-option key="2" label="菜单" value="菜单"></el-option>
                        <el-option key="3" label="按钮" value="按钮"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="icon" prop='icon'>
                    <el-input v-model="form.icon"></el-input>
                </el-form-item>
<!--                <el-form-item label="路由地址" prop='index'>-->
<!--                    <el-input v-model="form.index"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="排序" prop='num'>
                    <el-input v-model="form.num"></el-input>
                </el-form-item>
                <el-form-item label="上级目录">
                    <el-tree
                        :data="data"
                        show-checkbox
                        node-key="menuId"
                        check-strictly=true
                        @check='change'
                        :props="defaultProps">
                    </el-tree>
                </el-form-item>
            </el-form >
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit('edit')">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>
<script>
import { menu,getMenusByRoleId,editMenu,addMenu,delMenu} from '../../api/menu';
import { delUser } from '@/api/user';
export default {
    name: 'role',
    data() {
        return {
            data: [],
            //树形控件自定义
            defaultProps: {
                children: 'subs',
                label: 'title'
            },
            menuTreeList: [],
            //修改添加的表单
            form:{
                pid:0
            },
            editVisible:false,
            addVisible:false,
        }
    },
    created () {
        this.getMenuTree()
    //    creted别写到methods里...............
    },
    methods: {
        deleteM(row) {
            // 二次确认删除
            this.$confirm('确定要删除吗？', '提示', {
                type: 'warning'
            })
                .then(()=>{
                    console.log("这一行的menuid",row.menuId);
                        delMenu(row.menuId).then((res) => {
                            console.log(res);
                            if(res.code==200){
                                this.$message.success('删除成功');
                                this.getData();
                            }
                            else{
                                this.$message.error('该菜单已被分配,删除失败!');
                            }
                        })
                    }

                )
                .catch(() => {});
        },
        //当页面加载时获取数据
        //页面表格----- 获取所有的包括按钮----绑定的是menuTreeList
        getMenuTree() {
            menu().then(res=>{
                console.log("全部：",res);
                this.menuTreeList = res.data
                // this.data = res.data
                console.log("树：",this.menuTreeList);
            })
        },
        //编辑里的 ----获取除了button的菜单---绑定的是data
        getMenus() {
            let user = JSON.parse(localStorage.getItem('ms_username'));
            getMenusByRoleId(user.userType).then(res=>{
                this.data=res.data
            })
        },
        //使树形控件点击后  ----点哪个表示要让谁成为它的上一级----也就是设置自己（form）的pid为选中的menuid
        change(data) {
            this.form.pid=data.menuId
        },

        // 编辑操作
        handleEdit(ope, row) {
            if(ope === 'edit') {
                this.form = { ...row };
                this.editVisible = true;
            }else if(ope==='add'){
                this.form={};
                this.addVisible = true;
                this.form.pid = row.menuId
            }
            this.getMenus()
        },
        //保存按钮
        saveEdit(val) {
            if(val == 'edit') {
                console.log("编辑后的",this.form);
                editMenu(this.form).then(res=>{
                    if(res.code==200) {
                        this.data = res.data
                        this.editVisible = false
                        this.getMenuTree()
                    }
                })
            }else{//添加
                console.log("点击添加确定后传入的:",this.form);
                addMenu(this.form).then(res=>{
                    this.data = res.data
                    this.addVisible = false
                    this.getMenuTree()
                })
            }
        },

        /* 获取菜单树 */
    },

}
</script>
<style scoped>

</style>